<template>
    <div>
        <el-table :data="state" style="width: 100%" border>
            <el-table-column prop="date" label="Date" align="center">
                <template #header>
                    <input type="checkbox" v-model="allChoseOr" @click="allChose(allChoseOr)">
                </template>
                <template #default="scoped">
                    <input type="checkbox" v-model="showOr[scoped.row.id]">
                </template>
            </el-table-column>
            <el-table-column prop="brandId" label="编号" align="center"></el-table-column>
            <el-table-column prop="brandName" label="品牌名称" align="center"></el-table-column>
            <el-table-column label="是否推荐" align="center">
                <template #default="scoped">
                    <el-switch :value="scoped.row.recommendStatus == 1"
                        @change="hdclick(scoped.row.id, scoped.row.recommendStatus)" />
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center">
                <template #default="scoped">
                    {{ scoped.row.sort }}
                </template>
            </el-table-column>

            <el-table-column label="状态" align="center">
                <template #default="scoped">
                    {{ scoped.row.recommendStatus == 1
                        ? '推荐中'
                        : '未推荐' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template #default="scoped">
                    <i class="dosth" @click="sortFn(scoped.row.sort, scoped.row.id)">设置排序</i>&nbsp;
                    <i class="dosth"><el-button text @click="open(scoped.row.id)" style="color : red;">删除</el-button></i>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="downlist">
        <input type="text" list="changelist" placeholder="批量操作" v-model="isRecommend">
        <datalist id="changelist">
            <option value="设为推荐"></option>
            <option value="取消推荐"></option>
            <option value="删除"></option>
        </datalist>
        <button @click="sureClickFn">确认</button>
    </div>

    <!-- 翻页 -->
    <div style="display: flex; justify-content: flex-end;">
        <el-pagination :current-page="pageNum" :default-page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 弹出框 -->
    <div>
        <el-button text></el-button>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, watch, reactive } from 'vue'
import { toNumber } from 'lodash';


let handleSizeChange = (e: number) => {
    emit('update:pageSize', e)
    emit('updateAX')
}
let handleCurrentChange = (e: number) => {
    emit('update:pageNum', e)
    emit('updateAX')

}

const open = (e: number) => {
    ElMessageBox.confirm(
        '是否确认删除',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            emit('DeleteLists', e)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}
let props = defineProps<{
    state: Array<any>, //接收传进来的参数
    pageNum: number,
    pageSize: number,
    total: number
}>()
let emit = defineEmits<{
    (state: 'update:state'): void //双向绑定列表数据
    (pageNum: 'update:pageNum', e: number): void  //双向绑定页数
    (pageSize: 'update:pageSize', e: number): void
    (updateAX: 'updateAX'): void // 更新函数
    (DeleteLists: 'DeleteLists', e: any): void //删除函数
    (update: 'update', e: number | Array<number>, i: number): void // 修改推荐状态
    (updateSort: 'updateSort', sort: number | string, id: number)
}>()
let hdclick = (e: number, i: number) => {  //滑块开关的内容 返回新的状态
    emit('update', e, i)
}

// 循环添加默认状态的参数
let showOr = reactive({})
// 监听传递下来的动作
watch(props, (newval) => {
    for (let i in newval.state) {
        showOr[newval.state[i].id] = false
    }
}, {
    deep: true
})
let isRecommend = ref('') //批量进行推荐的状态  点击传递id和状态到外界
let sureClickFn = () => {
    if (isRecommend.value == '') {
        return //简单的判空
    }
    // 添加一个判断条件
    // 将需要传递的参数传递出去
    let ids: Array<number> = []
    for (let item in showOr) {
        if (showOr[item]) {
            ids.push(Number(item))
        }
    }
    let recommendStatus = isRecommend.value == '设为推荐' ? 0 : (isRecommend.value == '取消推荐' ? 1 : 100)
    // 最后 把ids和 isRecommend.value 传递出去 第三个参数
    emit('update', ids, recommendStatus)
    isRecommend.value = ''
}

// 全选,全不选
let allChoseOr = ref(false) //按钮状态
watch(showOr, (newVal) => {
    for (let item in showOr) {
        if (!showOr[item] == true) {
            allChoseOr.value = false
            return
        }
    }
    allChoseOr.value = true
}, {
    deep: true
})
// 全选点击事件
let allChose = (e: boolean) => {
    for (let item in showOr) {
        showOr[item] = !e
    }
}

// 设置排序 sortFn
let sortFn = (sort: number | string | null | undefined, id: number | undefined | null) => {
    // 点击后出现一个弹窗 在这个弹窗里面进行数据的修改
    openTwo(sort, id)

}
const openTwo = (sort :number |string , id : number) => {
    ElMessageBox.prompt('设置排序', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputErrorMessage: 'Invalid Email',
    })
        .then(({value}) => {
            // 拿到指定内容之后 进行回传
            let newSort = 0
            if(typeof value == 'number' || typeof value == 'string'){
                newSort = toNumber(value)
            }

            emit('updateSort', newSort, id)
            
            ElMessage({
                type: 'success',
                message: `设置排序成功`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '设置排序取消',
            })
        })
}


</script>
 
<style lang="scss" scoped>
i {
    cursor: pointer;
}

.dosth {
    color: rgb(64, 158, 255);
}

.downlist {
    padding: 20px;
    display: flex;
    align-items: center;

    input {
        width: 200px;
        border: 1px solid #999;
        outline: none;
        height: 26px;
        padding-left: 10px;
    }

    button {
        height: 30px;
        margin-left: 10px;
        background-color: rgb(64, 158, 255);
        border: 1px solid #999;
        color: white;
        border-radius: 3px;
        padding: 5px 13px;
    }

}</style>